<template>
  <el-form-item label="ID">
    <el-input v-model="selectedOptions.name" disabled />
  </el-form-item>
  <el-form-item label="name">
    <el-input v-model="selectedWidget.name" disabled />
  </el-form-item>
  <el-form-item label="绑定值">
    <el-input v-model="selectedOptions.modelValue" />
  </el-form-item>
  <el-form-item label="多选框组尺寸">
    <el-select v-model="selectedOptions.size" placeholder="Select">
      <el-option
        v-for="item in sizeOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </el-form-item>
  <el-form-item label="是否禁用">
    <el-switch v-model="selectedOptions.disabled" />
  </el-form-item>
  <el-form-item label="可被勾选的 checkbox 的最小数量">
    <el-input-number v-model="selectedOptions.min" :min="1" />
  </el-form-item>
  <el-form-item label="可被勾选的 checkbox 的最大数量">
    <el-input-number v-model="selectedOptions.max" :min="1" />
  </el-form-item>
  <el-form-item label="为屏幕阅读器准备的标签">
    <el-input v-model="selectedOptions.label" />
  </el-form-item>
  <el-form-item label="当按钮为活跃状态时的字体颜色">
    <el-input v-model="selectedOptions.textColor" />
  </el-form-item>
  <el-form-item label="当按钮为活跃状态时的边框和背景颜色">
    <el-input v-model="selectedOptions.fill" />
  </el-form-item>
  <el-form-item label="复选框组元素标签">
    <el-input v-model="selectedOptions.tag" />
  </el-form-item>
  <el-form-item label="是否触发表单验证">
    <el-switch v-model="selectedOptions.validateEvent" />
  </el-form-item>
  <el-form-item label="选择按钮组类型">
    <el-select
      v-model="selectedOptions.checkType"
      placeholder="Select"
      @change="checkTypeChange"
    >
      <el-option label="checkbox" value="checkbox" />
      <el-option label="checkboxButton" value="checkboxButton" />
    </el-select>
  </el-form-item>
  <el-button link type="primary" :icon="Plus" @click="handlePlus"></el-button>
</template>

<script setup>
import { ref } from "vue";
import { Plus, Minus } from "@element-plus/icons-vue";
import { nanoid } from "nanoid";
import { deepClone } from "@/utils/index";
import { getContainerByType } from "@/views/pageDesign/components/globalVariable";
defineOptions({
  name: "checkboxGroupAttribute",
  inheritAttrs: false,
});
let $props = defineProps({
  selectedWidget: {
    type: Object,
    required: true,
  },
  selectedOptions: {
    type: Object,
    required: true,
  },
});
let sizeOptions = [
  {
    value: "large",
    label: "large",
  },
  {
    value: "default",
    label: "default",
  },
  {
    value: "small",
    label: "small",
  },
];
//清空
let clearWidgetList = () => {
  $props.selectedWidget.widgetList.splice(
    0,
    $props.selectedWidget.widgetList.length
  );
};
//根据下拉框选择的类型增加checkbox or checkboxButton
let handlePlus = () => {
  let newCol = deepClone(getContainerByType(checkboxType.value));
  newCol.id = nanoid();
  newCol.options.name = newCol.id;
  $props.selectedWidget.widgetList.push(newCol);
};
let checkboxType = ref();
//监听下拉框改变事件
let checkTypeChange = (val) => {
  clearWidgetList();
  checkboxType.value = val;
};
</script>

<style lang="scss" scoped></style>
